<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>HTML5 using the canvas</title>
<script>
var	canvas,
	context,
	bookshelf,
	book1,
	book2,
	book3,
	book4,
	book5,
	bookWidth = 106,
	bookHeight = 151,
	openBook,
	playerx = 50,
	bookLineY = 128,
	currentX = 50,
	currentY = 128;
	count = 0,
	angle = 10,
	angleY = 0,
	selectedBook = -1,
	
	isOpenBook = -1;
	
	
	
function init() {
	canvas = document.getElementById('canvas');
	if(canvas == null)
		return false;
	context = canvas.getContext('2d');
	
	openBook = new Image();
	openBook.src = "image/open_book.png";
	
	drawBookshelf();
	drawBooks();
	context.save();
	
 	canvas.addEventListener('keypress', onKeyPress, false); 
 	canvas.addEventListener('mousedown', onMouseDown, false); 
 	canvas.addEventListener('mouseup', onMouseUp, false); 
 	canvas.focus();  
	
}

function drawBookshelf(){
	bookshelf = new Image();
	bookshelf.src = "image/bookshelf.png";
	bookshelf.onload = function(){
		context.drawImage(bookshelf, 0, 0, 800, 1138);
	};
}


function onKeyPress(evt) {
	
}

function onMouseDown(evt) {
	var mx, my;
	if(evt.layerX || evt.layerX == 0){
		mx = evt.layerX;
		my = evt.layerY;
	}else if(evt.offsetX || evt.offsetX == 0){
		mx = evt.offsetX;
		my = evt.offsetY;
	}
	
	//alert("mx="+mx+" my="+my);
	
	if(mx > 50 && mx < 50 + book1.width
		&& my > bookLineY && my < bookLineY + book1.height){
		selectedBook = 1;
		isOpenBook = 0;
	}else if(mx > 198 && mx < 198 + book2.width
		&& my > bookLineY && my < bookLineY + book2.height){
		selectedBook = 2;
		isOpenBook = 0;
	}else if(mx > 347 && mx < 347 + book3.width
		&& my > bookLineY && my < bookLineY + book3.height){
		selectedBook = 3;
		isOpenBook = 0;
	}else if(mx > 495 && mx < 495 + book4.width
		&& my > bookLineY && my < bookLineY + book4.height){
		selectedBook = 4;
		isOpenBook = 0;
	}else if(mx > 643 && mx < 643 + book5.width
		&& my > bookLineY && my < bookLineY + book5.height){
		selectedBook = 5;
		isOpenBook = 0;
	}else{
		selectedBook = -1;
		isOpenBook = -1;
	}

	
}

function onMouseUp(evt) {
	if(isOpenBook == 0){
		//alert("hello isOpenBook="+isOpenBook+" selectedBook="+selectedBook);
		
		setTimeout(drawOpenAnimation,30);
		
	    //setInterval(drawOpenAnimation, 50);
	}
}


function drawOpenAnimation(){
	
    if(currentX > 0 ){
    	currentX = currentX * 0.85;    	
    }else{
    	currentX = 0;
    }
    if(currentY > 0){
    	currentY = currentY * 0.75;     	
    }else{
    	currentY = 0;
    }
    
    
    var width = book1.width;
    var height = book1.height;
    
    if(width<800){
	    book1.width = width * 1.2;
	    if(book1.width>800){
	    	book1.width=800;
	    }
    }
    if(height<1138){
	    book1.height = height * 1.2;
	    if(book1.height>1138){
	    	book1.height = 1138;
	    }
    }
    
    context.save();
	//context.scale(1.25,1.25);
    context.drawImage(openBook, currentX, currentY, book1.width, book1.height);
    
    
    if(angle<90){
	    angleY = angleY + 10;
	    context.transform(1, -Math.tan(angle * Math.PI/180), 0, 1, 0, angleY);

	    angle = angle+10;
		
		//context.clearRect(0, 0, book1.width, book1.height);
		context.drawImage(book1, currentX, currentY, book1.width, book1.height);
	
	}
    
    context.restore();
	//if(book1.width<=800){
	count = count + 1;
	if(count <= 12){	
		setTimeout(drawOpenAnimation, 30);
	}
	//alert("hello book1.width="+book1.width+" book1.height="+book1.height);
	//setTimeout(drawOpenAnimation,50);
		
}


function drawBooks(){
    book1 = new Image();
    book1.src = "image/book1.png";
    book1.onload = function(){
        context.drawImage(book1, 50, bookLineY, 106, 151);
    };
    
    book2 = new Image();
    book2.src = "image/book2.png";
    book2.onload = function(){
        context.drawImage(book2, 198, bookLineY, 106, 151);
    };
    
    book3 = new Image();
    book3.src = "image/book3.png";
    book3.onload = function(){
        context.drawImage(book3, 347, bookLineY, 106, 151);
    };
    
    book4 = new Image();
    book4.src = "image/book4.png";
    book4.onload = function(){
        context.drawImage(book4, 495, bookLineY, 106, 151);
    };
    
    book5 = new Image();
    book5.src = "image/book5.png";
    book5.onload = function(){
        context.drawImage(book5, 643, bookLineY, 106, 151);
    };
}

</script>
</head>
<body onload="init();">
<canvas id="canvas" width="800" height="1138">Your browser does not support the <code>&lt;canvas&gt;</code>-element. Please think about updating your browser!</canvas>
<footer>

</footer>
</body>
</html>
